/**
 * Author: Shen Yanqiu
 * Date: 2018-02-24
 * Time: 17:06
 *
 */
import React from 'react';
import { Page } from 'components';
import { connect } from 'dva';
import { Row, Col, Card, Table, Icon } from 'antd';
import styles from './index.less';
import PropTypes from "prop-types";
import classNames from 'classnames';
import TopRightButton from "components/TopOperation/TopRightButton";

class PersonnelStatistics extends React.Component {
  static propTypes = {
    loading: PropTypes.object,
    personnelStatistics: PropTypes.object,
    dispatch: PropTypes.func,
  };

  render() {
    const { loading, personnelStatistics, dispatch } = this.props;
    const { list, pagination, statistics } = personnelStatistics;

    const columns = [{
      title: '序号',
      width: 100,
      dataIndex: 'xuhao',
      key: 'xuhao',
    }, {
      title: '部门',
      width: 100,
      dataIndex: 'bumen',
      key: 'bumen',
    }, {
      width: 800,
    }, {
      width: 200,
      title: '当前人数',
      dataIndex: 'presentPerson',
      key: 'presentPerson',
    }, {
      fixed: 'right',
      width: 150,
      title: '离职人数',
      dataIndex: 'dimission',
      key: 'dimission',
      render: (text, record) => <span>{ text }</span>,
    }];

    const changePaginationHandler = (_pagination) => {
      dispatch({
        type: 'personnelStatistics/loadTableList',
        payload: {
          current: _pagination.current,
          pageSize: _pagination.pageSize,
        },
      });
    };
    return (
      <Page loading={loading.effects['personnelStatistics/firstLoad']}>
        <Row className={styles.personnelStatistics}>
          <Col span={24} className={styles.cardListToTop}>
            <Row gutter={20}>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="team" className={classNames(styles.iconStyles, styles.blue)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>初总人数</span>
                      <span>1455345</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="tag-o" className={classNames(styles.iconStyles, styles.green)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>目前总人数</span>
                      <span>4533</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="paper-clip" className={classNames(styles.iconStyles, styles.yellow)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上周总人数</span>
                      <span>8761</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="inbox" className={classNames(styles.iconStyles, styles.red)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上月总人数</span>
                      <span>2312</span>
                    </p>
                  </div>
                </div>
              </Col>
            </Row>
            <Row gutter={20} className={styles.MarginTop}>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="share-alt" className={classNames(styles.iconStyles, styles.red)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上周离职人数</span>
                      <span>776</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="export" className={classNames(styles.iconStyles, styles.yellow)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上月离职人数</span>
                      <span>3213</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="filter" className={classNames(styles.iconStyles, styles.green)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上周离职比</span>
                      <span>20%</span>
                    </p>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.cardBox}>
                  <div className={styles.img}>
                    <Icon type="line-chart" className={classNames(styles.iconStyles, styles.blue)} />
                  </div>
                  <div className={styles.content}>
                    <p>
                      <span>上月离职比</span>
                      <span>68%</span>
                    </p>
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col span={24} className={styles.MarginTop}>
            <Card title={<span className={styles.CardTitle}>部门数据</span>} bordered={false} className={styles.CardTable}>
              <Table
                dataSource={list}
                columns={columns}
                // scroll={{ x: 1100, y: false }}
                pagination={pagination}
                onChange={changePaginationHandler}
                loading={loading.effects['activityStatistics/loadTableList']}
              />
            </Card>
          </Col>
        </Row>
        <TopRightButton contentText={"导出数据"} />
      </Page>
    );
  }
}
export default connect(({ loading, personnelStatistics }) => ({ loading, personnelStatistics }))(PersonnelStatistics);
